<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this指向</title>
</head>
<body>
<h3>this指向</h3>
<p>
    this 是 JavaScript 最具“魅惑”的知识点，不同的应用场合 this 的取值可能会有意想不到的结果， <br>
    在此我们对以往学习过的关于【 this 默认的取值】情况进行归纳和总结。 <br>
    目标： 了解函数中 this 在不同场景下的默认值，知道动态指定函数 this 值的方法
</p>
<p>
    学习路径： <br>
    1. 普通函数this指向 <br>
    2. 箭头函数this指向
</p>
<hr>

<h3> this指向-普通函数</h3>
<p>
    普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】<br>
    普通函数没有明确调用者时 this 值为 window，严格模式下没有调用者时 this 的值为 undefined
</p>
<pre style="font-size: 20px;">
  总结:
1. 普通函数this指向我们怎么记忆？
   【谁调用 this 的值指向谁】
2. 普通函数严格模式下指向谁？
   严格模式下指向 undefined
</pre>
<hr>

<h3>this指向-箭头函数</h3>
<p>
    箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this <br>
    1. 箭头函数会默认帮我们绑定外层(上一层) this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的 <br>
    2.箭头函数中的this引用的就是最近作用域中的this <br>
    3.向外层作用域中，一层一层查找this，直到有this的定义
</p>
<p>
    注意情况1： <br>
    在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window <br>
    因此DOM事件回调函数如果里面需要DOM对象的this，则不推荐使用箭头函数 <br>
    注意情况2： <br>
    同样由于箭头函数 this 的原因，基于原型的面向对象也不推荐采用箭头函数
</p>
<p>
    总结：
    1. 函数内不存在this，沿用上一级的
    2.不适用
     构造函数，原型函数，dom事件函数等等
    3. 适用
     需要使用上层this的地方
    4. 使用正确的话，它会在很多地方带来方便，后面我们会大量使用慢慢体会
</p>
<pre style="font-size: 20px;">
1. 函数内不存在this，沿用上一级的，过程：向外层作用域中，一层一层查找this，直到有this的定义
2. 不适用
  构造函数，原型函数，字面量对象中函数，dom事件函数
3. 适用
  需要使用上层this的地方
</pre>
<hr>

<button>点击</button>
<script>
    // 普通函数：  谁调用我，this就指向谁
    console.log(this)  // window

    function 函数() {
        console.log(this)  // window
    }
    window.函数()

    window.setTimeout(function () {
        console.log(this) // window
    }, 1000)

    document.querySelector('button').addEventListener('click', function () {
        console.log(this)  // 指向 button
    })

    const 对象 = {
        方法: function () {
            console.log(this)  // 指向 '对象'
        }
    }
    对象.方法()

    // 箭头函数this指向上一层, 前面教程讲解过
    // 3_JavaScript进阶/3_箭头函数(重要ES6新加语法)/3_箭头函数_this.html
</script>

</body>
</html>